<template>
    <div class="law-office">
        <page-main>
            <div class="flc">
                <h3 style="margin-right: auto;">律所列表</h3>
                <el-button type="primary" icon="el-icon-search" class="my-btn" @click="_getLawOffice()">搜索</el-button>
            </div>
            <el-form ref="search" :model="search" label-width="80px" size="small">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="律师名称">
                            <el-input v-model="search.name" placeholder="请输入律师名称" clearable />
                        </el-form-item>
                    </el-col>
                    <!--<el-col :span="12">
                        <el-form-item label="手机号">
                            <el-input v-model="search.mobile" placeholder="请输入手机号" clearable />
                        </el-form-item>
                    </el-col>-->
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="加入时间">
                            <el-date-picker
                                v-model="search.joinTime"
                                size="small"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                @change="changeTime"
                            />
                        </el-form-item>
                    </el-col>
                    <!--<el-col :span="12">
                        <el-form-item label="充值状态">
                            <el-radio-group v-model="search.source">
                                <el-radio-button :label="6">全部</el-radio-button>
                                <el-radio-button :label="1">未支付</el-radio-button>
                                <el-radio-button :label="2">成功</el-radio-button>
                                <el-radio-button :label="3">已退款</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>-->
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="审核状态">
                            <el-radio-group v-model="search.status">
                                <el-radio-button :label="6">全部</el-radio-button>
                                <el-radio-button :label="1">通过</el-radio-button>
                                <el-radio-button :label="0">待审</el-radio-button>
                                <el-radio-button :label="2">驳回</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="flc">
                <h3 style="margin-right: auto;">律所列表</h3>
                <el-button type="primary" class="my-btn">新建律所</el-button>
            </div>
            <el-table
                :data="tableData"
                :header-cell-style="{background:'#f2f2f2',color:'#555',textAlign: 'center'}"
                border
                style="width: 100%;"
            >
                <el-table-column label="基本信息" align="left" width="240">
                    <template slot-scope="scope">
                        <div class="over-hidden">
                            <img class="avatar" :src="scope.row.avatar || require('../../assets/images/title.png')" alt="">
                            <div class="info">
                                <div class="top">
                                    <svg-icon v-if="scope.row.source == 1" name="ios" />
                                    <svg-icon v-if="scope.row.source == 2" name="android" />
                                    <svg-icon v-if="scope.row.source == 0" name="question" />
                                    <svg-icon v-if="scope.row.source == 4" name="mini-program" />
                                    <svg-icon v-if="scope.row.source == 3" name="weixin" />
                                    <span style="padding-left: 5px;">{{ scope.row.name || '无名' }}</span>
                                    <el-tag v-if="scope.row.ismember === 1" size="mini" effect="dark" color="#5482ee" style="border-color: transparent; margin-left: 5px;">VIP</el-tag>
                                </div>
                                <div class="bot">{{ scope.row.province }}-{{ scope.row.city }}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="服务累计收益" align="center">
                    <template slot-scope="scope">
                        <div>
                            <svg-icon name="rmb" />{{ scope.row.price }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="负责人/手机" align="center" width="200">
                    <template>
                        <div>...</div>
                    </template>
                </el-table-column>
                <el-table-column label="加入时间" align="center">
                    <template slot-scope="scope">
                        <div>{{ scope.row.create_time }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="审核状态" align="center">
                    <template slot-scope="scope">
                        <div>
                            <!--<svg-icon name="rmb" />{{ scope.row.balance || 0 }}-->
                            <el-tag v-if="scope.row.status === 0" type="info">待审核</el-tag>
                            <el-tag v-else-if="scope.row.status === 1" type="success">通过</el-tag>
                            <el-tag v-else-if="scope.row.status === 2" type="danger">驳回</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="handleClick(scope.row, 0)">编辑</el-button>
                        <el-button type="text" size="small" @click="handleClick(scope.row, 1)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                :total="total"
                @handle-size-change="handleSizeChange"
                @handle-current-change="handleCurrentChange"
            />
        </page-main>
    </div>
</template>

<script>
import { getLawOffice } from '@/api/lawOfficeApi'
export default {
    name: 'LawOffice',
    data() {
        return {
            search: {
                name: '',
                mobile: '',
                joinTime: [],
                status: 6
            },
            tableData: [
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }
            ],
            currentPage: 1,
            pageSize: 10,
            total: 100,
            pageSizes: [5, 10, 15, 20]
        }
    },
    created() {
        this._getLawOffice()
    },
    methods: {
        async _getLawOffice() {
            let data = {
                p: this.currentPage,
                length: this.pageSize,
                name: this.search.name,
                status: this.search.status == 6 ? '' : this.search.status,
                create_time_start: this.search.joinTime[0] || '',
                create_time_end: this.search.joinTime[1] || ''
            }
            this.$SpinkitLoading({type: 'chase', size: 50, color: '#ffffff'})
            const res = await getLawOffice(data)
            this.tableData = res.data.list
            this.total = res.data.total
            this.$SpinkitLoading.close()
            console.log(res)
        },
        changeTime(val) {
            this.$nextTick(() => {
                if (val == null) {
                    this.search.joinTime = []
                }
            })
        },
        // 分页 2 个方法
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`)
            this.pageSize = val
            this._getLawOffice()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`)
            this.currentPage = val
            this._getLawOffice()
        }
    }
}
</script>

<style scoped lang="scss">
    .over-hidden {
        display: flex;
        align-items: center;
        .avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            margin-right: 10px;
        }
        .info {
            .top {
                display: flex;
                align-items: center;
            }
            .bot {
                font-size: 12px;
                color: #909399;
            }
        }
    }
</style>
